<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>购物车页面</title>

    <link href="assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="basic/css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="css/cartstyle.css" rel="stylesheet" type="text/css"/>
    <link href="css/optstyle.css" rel="stylesheet" type="text/css"/>
    <link type="text/css" href="js/sweetalert/sweetalert.css" rel="stylesheet"/>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/sweetalert/sweetalert.min.js"></script>

</head>

<body>
<header th:replace="mall/header::header-user"></header>
<nav th:replace="mall/header::header-search"></nav>

<div class="clear"></div>

<!--购物车 -->
<div class="concent">
    <div id="cartTable">
        <div class="cart-table-th">
            <div class="wp">
                <div class="th th-item">
                    <div class="td-inner">商品信息</div>
                </div>
                <div class="th th-price">
                    <div class="td-inner">单价</div>
                </div>
                <div class="th th-amount">
                    <div class="td-inner">数量</div>
                </div>
                <div class="th th-sum">
                    <div class="td-inner">金额</div>
                </div>
                <div class="th th-op">
                    <div class="td-inner">操作</div>
                </div>
            </div>
        </div>
        <div class="clear"></div>

        <tr class="item-list">
            <div class="bundle  bundle-last ">
                <div class="clear"></div>
                <div class="bundle-main">
                    <th:block th:each="item : ${myShoppingCartItems}">
                        <ul class="item-content clearfix">
                            <li class="td td-item" style="width:45%;">
                                <div class="item-pic">
                                    <a href="#" target="_blank"
                                       class="J_MakePoint" data-point="tbcart.8.12">
                                        <img th:src="@{${item.goodsCoverImg}}" src="images/kouhong.jpg_80x80.jpg"
                                             class="itempic J_ItemImg"></a>
                                </div>
                                <div class="item-info">
                                    <div class="item-basic-info">
                                        <a href="#" target="_blank"
                                           class="item-title J_MakePoint" data-point="tbcart.8.11"
                                           th:text="${item.goodsName}">
                                            美康粉黛醉美唇膏 持久保湿滋润防水不掉色</a>
                                    </div>
                                </div>
                            </li>
                            <li class="td td-price">
                                <div class="item-price price-promo-promo">
                                    <div class="price-content">
                                        <div class="price-line">
                                            <em class="J_Price price-now" tabindex="0" th:text="${item.sellingPrice}">39.00</em>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="td td-amount">
                                <div class="amount-wrapper ">
                                    <div class="item-amount ">
                                        <div class="sl">
                                            <input class="text_box" th:id="${'goodsCount'+item.cartItemId}"
                                                   th:value="${item.goodsCount}"
                                                   th:onblur="'updateItem('+${item.cartItemId}+')'"
                                                   name="" type="text" value="3" style="width:30px;"/>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="td td-sum">
                                <div class="td-inner">
                                    <em tabindex="0" class="J_ItemSum number"
                                        th:text="${item.goodsCount*item.sellingPrice}">117.00</em>
                                </div>
                            </li>
                            <li class="td td-op">
                                <div class="td-inner">
                                    <a href="javascript:;" th:onclick="'deleteItem('+${item.cartItemId}+')'"
                                       data-point-url="#" class="delete">
                                        删除</a>
                                </div>
                            </li>
                        </ul>
                    </th:block>
                </div>
            </div>
        </tr>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>

    <div class="float-bar-wrapper">
        <div class="float-bar-right">
            <div class="amount-sum">
                <span class="txt">商品数量</span>
                <em id="J_SelectedItemsCount" th:text="${itemsTotal}">0</em><span class="txt">件</span>
                <div class="arrow-box">
                    <span class="selected-items-arrow"></span>
                    <span class="arrow"></span>
                </div>
            </div>
            <div class="price-sum">
                <span class="txt">合计:</span>
                <strong class="price">¥<em id="J_Total" th:text="${priceTotal}">0.00</em></strong>
            </div>
            <div class="btn-area">
                <a th:onclick="settle([[${itemsTotal}]]);" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
                    <span>结&nbsp;算</span></a>
            </div>
        </div>

    </div>

    <div th:replace="mall/footer::footer-fragment"></div>

</div>

</body>
<script>

    /**
     * 跳转至结算页面
     */
    function settle(itemsTotal) {
        if(itemsTotal == 0){
            swal("购物车中无数据，去买点东西吧", {
                icon: "error",
            });
            return;
        }
        window.location.href = '/cart-order'
    }

    /**
     *更新购物项
     *
     * todo 判断是否与原值相同
     */
    function updateItem(id) {
        var domId = 'goodsCount' + id;
        var goodsCount = $("#" + domId).val();
        if (goodsCount < 1) {
            swal("数量异常", {
                icon: "error",
            });
            return;
        }
        var data = {
            "cartItemId": id,
            "goodsCount": goodsCount
        };
        $.ajax({
            type: 'PUT',
            url: '/shop-cart',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (result) {
                if (result.resultCode == 200) {
                    window.location.reload();
                } else {
                    swal("操作失败", {
                        icon: "error",
                    });
                }
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    }

    /**
     * * 删除购物项
     * @param id
     */
    function deleteItem(id) {
        swal({
            title: "确认弹框",
            text: "确认要删除数据吗?",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((flag) => {
                if (flag) {
                    $.ajax({
                        type: 'DELETE',
                        url: '/shop-cart/' + id,
                        success: function (result) {
                            if (result.resultCode == 200) {
                                window.location.reload();
                            } else {
                                swal("操作失败", {
                                    icon: "error",
                                });
                            }
                        },
                        error: function () {
                            swal("操作失败", {
                                icon: "error",
                            });
                        }
                    });
                }
            }
        )
        ;
    }


</script>

</html>